<template>
  <view class="" @click="handleClick">
    <view class="p-1 rounded active:opacity-75" :style="`background-color: ${item.color}`">
      <view class="flex justify-between">
        <text class="text-white">{{ item.title }}</text>
        <view>
          <image :src="rightIcon" class="h-5 w-5"></image>
        </view>
      </view>
    </view>
    <view class="bg-gray-100 p-3 text-xs text-gray-500">
      {{ item.desc }}
    </view>
  </view>
</template>

<script setup lang="ts">
import rightIcon from '@/static/right.svg'

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {
        title: '登录授权',
        url: '',
        desc: '用户扫码二维码登录，获取用户头像及昵称',
        color: '#50d71e',
      }
    }
  }
})

const handleClick = () => {
  if (props.item.url) {
    uni.navigateTo({
      url: props.item.url
    })
  } else {
    uni.showModal({
      title: '提示',
      content: '该功能暂未开放，敬请期待',
      showCancel: false,
      confirmText: '知道了'
    })
  }
}

</script>

<style scoped>

</style>